<template>
	<div>

		<div class="row">
			<div class="col-lg-12">


				<div class="panel bk-widget bk-border-off">
					<div class="panel-body text-left bk-bg-primary bk-fg-white bk-padding-top-10 bk-padding-bottom-10">
						<div class="row">
							<div class="col-xs-4 bk-vcenter">
								<div class="bk-avatar">
									AI-IOT
									<p>物联网卡管理平台</P>
									<!--<img src="../../assets/img/avatar.jpg" alt="" class="bk-img-80 bk-border-white bk-border-3x">-->
								</div>
							</div>
							<div class="col-xs-8 text-right bk-vcenter">
								<h4 class="bk-margin-off" v-text="profileList.description"></h4>
								<small v-text="profileList.username"></small>
								<div class="bk-margin-top-10">
									<a class="btn btn-default pull-right" @click="editPassword" v-text="passwordTxt"></a>
								</div>
							</div>
						</div>
					</div>
					<div class="panel-body bk-bg-white no-padding">
						<div class="todo-list">
							<div class="header" v-if="isEditPw">登录信息</div>
							<div  class="form-horizontal " v-if="isEditPw">
								<br>
								<div class="form-group">
									<label class="col-md-3 control-label">原始密码</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" v-model="pwd">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">新密码</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" v-model="newpwd">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">确认密码</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" v-model="confpwd">
									</div>
								</div>
								<br>

								<div class="form-group">
									<label class="col-md-3 control-label">&nbsp;</label>
									<div class="col-md-9 result-msg" v-text="changeInfo.resultMsg">
									</div>
								</div>

								<div class="form-group">
									<label class="col-md-3 control-label"></label>
									<div class="col-md-9">
										<input type="button" name="previous" value="提交" class="btn btn-primary button-previous" @click="changePassword">
									</div>
								</div>
							</div>
							<div class="header">用户信息</div>
							<div  class="form-horizontal ">
								<br>
								<div class="form-group">
									<label class="col-md-3 control-label">公司名称</label>
									<div class="col-md-9">
										<p class="form-control-static" v-if="!isEdit" v-text="profileList.company"></p>
										<input type="text" name="text-input" class="form-control" value="公司名称" v-if="isEdit">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">所属行业</label>
									<div class="col-md-9">
										<p class="form-control-static" v-if="!isEdit" v-text="profileList.industry"></p>
										<select name="select" class="form-control" size="1" v-if="isEdit">
											<option v-for="(opts, key) in industryList.result" :value="key">{{opts}}</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">联系人</label>
									<div class="col-md-9">
										<p class="form-control-static" v-if="!isEdit" v-text="profileList.description"></p>
										<input type="text" name="text-input" class="form-control" value="李进福" v-if="isEdit">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">联系电话</label>
									<div class="col-md-9">
										<p class="form-control-static" v-if="!isEdit" v-text="profileList.phone"></p>
										<input type="text" name="text-input" class="form-control" value="13999999999" v-if="isEdit">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">邮箱</label>
									<div class="col-md-9">
										<p class="form-control-static" v-if="!isEdit" v-text="profileList.email"></p>
										<input type="text" name="text-input" class="form-control" value="ljf@163.com" v-if="isEdit">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">收货地址</label>
									<div class="col-md-9">
										<p class="form-control-static" v-if="!isEdit" v-text="profileList.address"></p>
										<input type="text" name="text-input" class="form-control" value="广州天河区" v-if="isEdit">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">备注</label>
									<div class="col-md-9">
										<p class="form-control-static" v-if="!isEdit" v-text="profileList.remarks"></p>
										<textarea name="textarea-input" rows="6" class="form-control" v-if="isEdit">备注信息</textarea>
									</div>
								</div>
								<br>
								<!--<div class="form-group">
									<label class="col-md-3 control-label"></label>
									<div class="col-md-9">
										<input type="button" name="previous" value="修改" class="btn btn-info button-previous" v-if="!isEdit" @click="editUser">
										<input type="button" name="previous" value="取消" class="btn btn-danger button-previous" v-if="isEdit" @click="cancleUser">
										<input type="button" name="previous" value="提交" class="btn btn-primary button-previous" v-if="isEdit" @click="saveUser">
									</div>
								</div>-->
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>


	</div>
</template>
<script>

	import {mapGetters} from 'vuex'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				profileList: 'getProfileList',
				changeInfo: 'getLoginStatus',
				industryList: 'getIndustry'
			})
		},
		data () {
			return {
				passwordTxt: '修改密码',
				isEditPw: false,
				isEdit: false,
				pwd: '',
				newpwd: '',
				confpwd: ''
			}
		},
		methods: {
			// 修改密码
			editPassword () {

				if(!this.isEditPw) {
					this.passwordTxt = '不修改'
					this.isEditPw = true
				}else {
					this.passwordTxt = '修改密码'
					this.isEditPw = false
				}
			},
			// 修改密码
			changePassword () {

				let params = {

					oldpassword: this.pwd,
					newpassword: this.newpwd,
					confirmpassword: this.confpwd
				}
				this.$store.dispatch('fetchChangePwd', params)
			},
			// 修改
			editUser () {
				this.isEdit = true
			},
			// 取消
			cancleUser () {
				this.isEdit = false
			},
			// 提交
			saveUser () {
				this.isEdit = false
			}
		},
		created () {

		},
		mounted () {

			// 用户信息
			this.$store.dispatch('fetchProfile')

			// 行业列表
			this.$store.dispatch('fetchIndustry')

		},
		components: {
		},
		watch: {
			changeInfo (newVal) {

				if(this.changeInfo.success) {

					this.passwordTxt = '修改密码'
					this.isEditPw = false
				}
			}
		}
	}


</script>

<style>
	.order-set {
		padding: 0 20px 20px 20px;
	}
	.result-msg {
		color: #c7254e;
	}
</style>
